<template>
  <div class="activityPage">
    <div class="searchBox bgfff">
      <div class="tabsBox">
        <el-tabs v-model="form.suadd" @tab-click="handleClick">
          <el-tab-pane label="积分获得" name="1"></el-tab-pane>
          <el-tab-pane label="积分消耗" name="2"></el-tab-pane>
        </el-tabs>
        <el-button
          type=""
          size="small"
          @click="
            () => {
              $router.go(-1);
            }
          "
          >返回</el-button
        >
      </div>
      <el-form
        :inline="true"
        :model="form"
        ref="formRef"
        class="demo-form-inline"
        size="small"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="相关模块：" prop="module_type">
              <el-select v-model="form.module_type" placeholder="请选择">
                <el-option label="全部" value=""></el-option>
                <el-option
                  v-for="(item, key, index) in ScoreModuleList"
                  :key="index"
                  :label="item"
                  :value="key"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="form.suadd == 1 ? '获得日期' : '消耗日期'"
              prop="s_edate"
            >
              <div class="time">
                <el-date-picker
                  v-model="form.s_edate"
                  type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="~"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="display: flex; justify-content: flex-end">
            <el-form-item style="margin-right: 0">
              <el-button type="primary" size="small" @click="onSubmit"
                >查询</el-button
              >
              <el-button @click="resetForm('formRef')">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="tablesCard bgfff">
      <div class="tablesCardTop">
        <el-button type="primary" size="small" @click="addShow = true"
          >导出</el-button
        >
      </div>
      <el-table :data="tableData" border size="small" style="width: 100%">
        <!-- height="580" -->
        <el-table-column prop="_code" label="序号" align="center" width="80">
        </el-table-column>
        <el-table-column
          prop="create_at"
          :label="form.suadd == 1 ? '获得日期' : '消耗日期'"
          align="center"
        >
        </el-table-column>
        <!-- <el-table-column
          prop="accumulative_total"
          label="积分类型"
          align="center"
        /> -->
        <el-table-column prop="point" label="积分数" align="center" />
        <el-table-column
          prop="module_type_txt"
          label="相关模块"
          align="center"
        />
        <el-table-column prop="remarks" label="积分说明" align="center" />
      </el-table>
      <div class="pageBlock">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :current-page.sync="form.page"
          :page-size="form.limit"
          @size-change="
            (e) => {
              form.limit = e;
              getList();
            }
          "
          @current-change="
            (e) => {
              form.page = e;
              getList();
            }
          "
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getScoreType,
  getScoreModuleType,
  getUserDetailsScore,
} from "@/api/score.js";

export default {
  name: "",
  props: [""],

  data() {
    return {
      form: {
        type: "",
        suadd: "1",
        module_type: "",
        uid: "",
        s_edate: [],
        page: 1,
        limit: 10,
      },
      tableData: [],
      total: 0,
      projectId: "",
      ScoreTypeList: {},
      ScoreModuleList: {},
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {
    this.form.type = this.$route.query.type;
    this.form.uid = this.$route.query.id;
    this.getScoreType();
    this.getScoreModuleType();
    this.getList();
  },

  methods: {
    getScoreType() {
      getScoreType().then((res) => {
        if (res.code == 200) this.ScoreTypeList = res.data;
      });
    },
    getScoreModuleType() {
      getScoreModuleType().then((res) => {
        if (res.code == 200) this.ScoreModuleList = res.data;
      });
    },
    onSubmit() {
      this.getList();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.getList();
    },
    getList() {
      getUserDetailsScore({
        ...this.form,
        s_edate: this.form.s_edate.join(","),
      }).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.total = res.data.page.count;
        }
      });
    },
    onBtns(info) {
      this.projectId = info.id;
    },
    handleClick() {
      this.form.page = 1;
      this.getList();
    },
  },

  watch: {},
};
</script>
<style lang="scss" scoped>
.activityPage {
  .searchBox {
    margin-bottom: 14px;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    height: 147px;
    .tabsBox {
      position: relative;
      margin: 10px 0 20px;
      .el-tabs {
        display: flex;
        flex-direction: column;
        justify-content: center;
        .el-tabs__nav-wrap::after {
          background-color: rgba(0, 0, 0, 0);
        }
      }
      .el-button {
        position: absolute;
        right: 0;
        top: 0;
      }
    }
    /deep/.el-form-item {
      margin-bottom: 0;
      .el-input__inner {
        width: 200px;
      }
      .time {
        .el-input__inner {
          width: 400px;
        }
      }
    }
  }
  .tablesCard {
  }
}
</style>
